<template>
  <div class="app-container">
    <el-card style="width: 100%">
      <el-row
        style="margin: 5px 0px"
        type="flex"
        justify="space-around">
        <el-col :span="12">
          <span style="margin-right: 20px;">
            产品编号：{{ product_no }}
          </span>
          <el-button
            type="primary"
            size="medium"
            icon="el-icon-s-promotion"
            @click="handleTransferAction">
            在线调用
          </el-button>
        </el-col>
        <el-col
          :span="12"
          style="text-align: right"></el-col>
      </el-row>
      <table-list
        ref="tableList"
        :fields="tableDataColumn"
        :data="productListData"
        :pagination="true"
        :searchFunc="realNameAuthenticationGetList"
        :searchDefault="searchConditions"
        border></table-list>
    </el-card>
  </div>
</template>
<script>
  import Transfer from '@/views/product/credentials/idCard/transfer';
  import Detail from '@/views/product/credentials/idCard/detail';
  import { realNameAuthenticationGetList } from '@/api/product';
  import TableList from '@/components/TableList/index';
  export default {
    name: 'list',
    components: {
      TableList,
    },
    props: {
      product_no: {
        type: [String, Number],
        default: '',
      },
    },
    data() {
      return {
        realNameAuthenticationGetList,
        productListData: [],
        pageSize: 10,
        currentPage: 1,
        loading: false,
        total: 0,
        tableDataColumn: [
          {
            prop: 'name',
            searchName:"name",
            label: '姓名',
            minWidth: '120',
            searchType: 'input',
          },
          {
            prop: 'id_card',
            searchName:"id_card",
            label: '身份证',
            minWidth: '180',
            searchType: 'input',
          },
          {
            prop: 'status',
            searchName:"status",
            label: '状态',
            options: [
              {
                value: 100,
                label: '成功',
                color: '#67C23A',
              },
              {
                value: 0,
                label: '失败',
                color: '#F56C6C',
              },
            ],
            minWidth: '120',
            searchType: 'select',
          },
          {
            prop: 'message',
            searchName:"message",
            label: '描述',
            minWidth: '120',
          },
          {
            prop: 'is_charge',
            searchName:"is_charge",
            label: '收费',
            searchType: 'select',
            options: [
              {
                value: 1,
                label: '扣费',
                color: '#67C23A',
              },
              {
                value: 0,
                label: '不扣费',
                color: '#F56C6C',
              },
            ],
            minWidth: '120',
          },
          {
            prop: 'user.nick_name',
            label: '用户',
            minWidth: '120',
          },
          {
            prop: 'created_at',
            searchName:"created_at",
            label: '创建时间',
            minWidth: '180',
            searchType: 'dateTime',
          },
          {
            label: '操作',
            searchField: false,
            render: (h, scope) => {
              return (
                <div>
                  <el-button
                    size='mini'
                    type='text'
                    onClick={() => {
                      this.showDetailAction(scope.row);
                    }}>
                    查看
                  </el-button>
                </div>
              );
            },
            fixed: 'right',
            minWidth: '160',
          },
        ],
      };
    },
    computed: {
      searchConditions() {
        return {
          user_id: this.$store.state.user.info.id,
          product_no: this.product_no,
        };
      },
    },
    methods: {
      handleTransferAction() {
        this.showTransferAction();
      },
      showTransferAction() {
        this.$createDialog({
          title: '在线调用',
          component: Transfer,
          width: '40%',
          props: {
            productNo: this.product_no,
          },
          buttons: [{ text: '提交', callback: 'handleSubmit', name: 'submit' }],
          onClose: () => {
            this.$refs.tableList.resetAction();
          },
        });
      },
      showDetailAction(row) {
        this.$createDialog({
          title: '详情',
          component: Detail,
          width: '40%',
          props: {
            formData: row,
          },
          buttons: [{ text: '关闭', callback: 'handleSubmit', name: 'submit' }],
        });
      },
    },
  };
</script>
